<template>
  <header>
    <div class="l-content">
      <!-- -------- -->
      <el-button
        icon="el-icon-s-fold"
        size="mini"
        @click="collapseMenu"
        class="hidden-sm-and-down"
      >
      </el-button>
      <el-breadcrumb separator="/" class="hidden-sm-and-down">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current">
          {{ current.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <!-- --------------- -->
      <el-button icon="el-icon-menu" @click="aside = true" class="hidden-md-and-up">
      </el-button>
    </div>
    <!-- 搜索框 -->

    <!--/搜索框-->
    <div>
      <transition name="el-zoom-in-center">
        <div v-show="show2">.el-zoom-in-center</div>
      </transition>
    </div>
    <!-- ----------- -->
    <div class="r-content">
      <span class="userName">{{ userName }}</span>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-avatar :src="userImg"></el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/personalData">
              <i class="el-icon-user"></i>个人中心
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/contact">
              <i class="el-icon-mobile-phone"></i>联系我们
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/about">
              <i class="el-icon-question"></i>关于我们
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/feedback">
              <i class="el-icon-headset"></i>意见反馈
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-link @click="loginOut">
              <i class="el-icon-switch-button"></i>安全退出
            </el-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-drawer :visible.sync="aside" direction="ltr" :withHeader="false" size="50%">
      <common-aside> </common-aside>
    </el-drawer>
  </header>
</template>

<script>
import { mapState } from "vuex";
import CommonAside from "./CommonAside.vue";
export default {
  components: {
    CommonAside,
  },
  computed: {
    ...mapState({
      current: (state) => state.tab.currentMenu,
    }),
  },
  data() {
    return {
      userImg: require("../assets/image/logo.png"),
      onlean: false,
      aside: false,
      show2: false,
      userName: localStorage.getItem("token"),
    };
  },
  methods: {
    collapseMenu() {
      this.$store.commit("collapseMenu");
    },
    loginOut() {
      localStorage.clear();
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.r-content {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.r-content .userName {
  cursor: no-drop;
  margin: 0 15px;
}
.l-content {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 20px;
  }
}
</style>
<style lang="scss">
.el-breadcrumb__item {
  .el-breadcrumb__inner {
    color: #7e7a7a;
  }
  &:last-child {
    .el-breadcrumb__inner {
      color: black;
    }
  }
}
</style>
